<template>
  <div class="redpacket-index">
    <mt-header :title="$route.meta.title" v-if="showTitle" fixed>
      <a slot="left" >
        <mt-button icon="back" @click.native="go()">返回</mt-button>
      </a>
      <span slot="right" @click="$router.push('/rule')">规则</span>
    </mt-header>
    <div class="item-task">
      <mt-cell title="签到任务红包"></mt-cell>
      <mt-cell>
        <span class="days">
          <span :class="{'day-active':item.check}" v-for="(item,i) in daysList" :key="i" class="days-item">{{item.name}}</span>
        </span>
        <mt-button @click="handleSigns" size="small">签到</mt-button>
        <!-- <mt-button @click="pickPacket" size="small">领红包</mt-button> -->
        <img slot="icon" src="../../../static/imgs/qiandao.png" width="24" height="24">
      </mt-cell>
    </div>
    <div class="item-task">
      <mt-cell title="垫付任务红包"></mt-cell>
      <mt-cell>
        <mt-progress :value="100*taskNum/3">
          <div slot="end">{{taskNum}}/3</div>
        </mt-progress>
        <mt-button :disabled="taskPacket" @click="pickPacket(taskId)" size="small">领红包</mt-button>
        <img slot="icon" src="../../../static/imgs/dianfutask.png" width="24" height="24">
      </mt-cell>
    </div>
    <div class="item-task">
      <mt-cell title="邀请老铁红包"></mt-cell>
      <mt-cell class="yaoqing">
        <mt-progress :value="100*yaoqingNum/3">
          <div slot="end">{{yaoqingNum}}</div>
        </mt-progress>
        <mt-button size="small" @click.native="$router.push('/toMoney')">邀请</mt-button>
        <mt-button :disabled="yaoqingPacket" size="small" @click="pickPacket(yaoqingId)">领红包</mt-button>
        <img slot="icon" src="../../../static/imgs/yaoqing.png" width="24" height="24">
      </mt-cell>
    </div>
    <will-packet :id="id" v-show="isRedPacket" @closePacket="handleClosePacket"></will-packet>
  </div>
</template>

<script>
import WillPacket from './will-packet'
import {Toast,MessageBox} from 'mint-ui';
import Loading from '@/components/base/loading/Loading.vue'
import {userService} from '#/service'
export default {
  name: 'redpacket',
  data(){
    let days = [];
    let myDate = new Date();
    for (let i = 5; i > 0; i--) {
      days.unshift({
        name: `${myDate.getDate()}号`,
        check: false
      });
      myDate.setTime(myDate.getTime() - 1000*60*60*24);
    }
    return {
      showBox: false,
      id: null,
      taskId: null,
      yaoqingId: null,
      taskPacket: true,
      yaoqingPacket: true,
      isRedPacket:false,
      isPicking: false,
      taskNum: 0,
      yaoqingNum: 0,
      ignoreTitle:['login'],
      daysList: days
    }
  },
  created () {
    this.handleSigns()
    this.getTaskRedpacket()
    this.getYaoqingRedNumber()
    this.getLotterList()
  },
  methods:{
    go(){
      this.$router.go(-1)
    },
    handleClosePacket() {
      this.isRedPacket = false
    },
    getLotterList () {
      this.$nextTick(async () => {
        let res = await userService.lotteryList({
          data:{
            lolotteryId: ''
          }
        })
        if(res.data && res.data.length > 0){
          for (let i = 0; i < res.data.length; i++) {
            const { id, type } = res.data[i]
            if (type === 3) {
              this.yaoqingPacket = false
              this.yaoqingId = id
            }
            if (type === 5) {
              this.taskPacket = false
              this.taskId = id
            }
          }
        }
      })
    },
    pickPacket (id) {
      this.id = id
      this.isRedPacket = true
    },
    handleSigns () {
      this.$nextTick(async () => {
        let res = await userService.sign({
          data:{}
        })
        if(res.data){
          let flag = true
          for (let i = 0; i < res.data.length; i++) {
            if (!res.data[i]) {
              flag = false
              break;
            }
          }
          this.isPicking = flag
          this.daysList.forEach((v, i) => {
            v.check = res.data[i]
          })
        }
      })
      this.$nextTick(async () => {
        let res = await userService.getSign({
          data:{}
        })
        if(res.data && res.data > 0){
          this.isRedPacket = true
        }
      })
    },
    getTaskRedpacket () {
      this.$nextTick(async () => {
        let res = await userService.taskRedpacket({
          data:{}
        })
        if(res.data){
          this.taskNum = res.data
        }
      })
    },
    getYaoqingRedNumber () {
      this.$nextTick(async () => {
        let res = await userService.getNumber({
          data:{}
        })
        if(res.data && res.data.length > 0){
          this.yaoqingNum = res.data[0]
        }
      })
    }
  },
  computed:{
    showTitle(){
      return !(this.ignoreTitle.includes(this.$route.name));
    }
  },
  components:{
    Loading,
    WillPacket
  }
}

</script>
<style lang="less">
  .redpacket-index {
    background-color: #f5f5f5;
    .mint-button--small {
      width: 60px;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;
      height: 26px;
      line-height: 26px;
    }
    .item-task {
      margin-bottom: 15px;
    }
    .days {
      white-space: nowrap;
    }
    .days-item {
      font-size: 12px;
      margin-right: 5px;
      border-radius: 50%;
      background: #f6f8fa;
      width: 35px;
      height: 35px;
      float: left;
      line-height: 35px;
      text-align: center;
    }
    .day-active {
      background: red;
      color: #ffffff;
    }
    .mt-progress {
      width: 50%;
    }
    .mint-cell-title {
      flex: initial;
      padding-right: 10px;
      white-space: nowrap;
    }
    .mint-cell-value {
      width: 90%;
      display: flex;
      justify-content: space-between;
    }
    .yaoqing {
      .mint-cell-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .mt-progress-content {
        width: 100%;
        flex: initial;
      }
    }
    .mt-progress-content {
      margin-right: 5px;
    }
  }
</style>
